<template>
  <div>
    <div style="height: 13px" />
    <div class="position-item" style="background: #10aeff;margin-top: 13px">
      <div class="component-title">{{ $t('sky') }}</div>
      <div>
        <i class="el-icon-sunny" style="font-size: 50px" />
      </div>
      <sky-data-chart style="width: 330px;" :sky-data="skyData" />
    </div>
    <div class="position-item" style="background: #f3f3f1">
      <div class="component-title">{{ $t('land') }}</div>
      <div>
        <i class="el-icon-location-outline" style="font-size: 50px" />
      </div>
      <land-map :device="device" style="width: 330px" />
    </div>
    <div class="position-item" style="background: #0033ff">
      <div class="component-title">{{ $t('sea') }}</div>
      <div>
        <i class="el-icon-milk-tea" style="font-size: 50px" />
      </div>
      <div style="height: 230px;width: 100px;">
        <div class="title" style="margin-bottom: 5px">{{ $t('altitude') }}</div>
        <el-slider
          v-model="altitude"
          :min="0"
          :max="5000"
          vertical
          height="200px"
          :marks="{0: '0m',1000: '1000m',2000: '2000m',3000: '3000m',4000: '4000m'}"
        />
      </div>
    </div>
    <div class="position-item" style="background: #5a5e66;">
      <div class="component-title"> {{ $t('soil') }}</div>
      <div>
        <i class="el-icon-watermelon" style="font-size: 50px" />
      </div>
      <div style="display: flex">
        <div>
          <span class="title">{{ $t('soilTemperature') }}</span>
          <span class="value">{{ soilTemperature }}℃</span>
        </div>
        <div>
          <div style="text-align: center;margin-bottom: 13px;color: white;font-size: 15px">
            {{ $t('soilWater') }}
          </div>
          <dv-water-level-pond :config="{data: [soilWater],shape: 'round'}" style="width:200px;height:200px" />
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import SkyDataChart from './components/SkyDataChart'
import LandMap from './components/LandMap'
import { formatDate } from '@/util/common'
import { listSensorWith } from '@/api/iot/iotDeviceSensorApi'
export default {
  name: 'WeatherStation',
  components: {
    SkyDataChart,
    LandMap
  },
  props: {
    device: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      sunLight: 0,
      airHumidity: 0,
      airTemperature: 0,
      airPressure: 0,
      altitude: 0,
      pm10: 0,
      pm25: 0,
      co2: 0,
      soilWater: 0,
      soilTemperature: 0,
      skyData: []
    }
  },
  watch: {
    device: {
      deep: true,
      handler(value) {
        if (value != null) {
          this.listSensorWith()
        }
      }
    }
  },
  methods: {
    listSensorWith() {
      const that = this
      listSensorWith({
        deviceCore: this.device.deviceCore,
        withExplain: true
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          that.sensorList = data
          that.init()
        }
      })
    },
    init() {
      const that = this
      that.sunLight = 0
      that.airHumidity = 0
      that.airTemperature = 0
      that.airPressure = 0
      that.altitude = 0
      that.pm10 = 0
      that.pm25 = 0
      that.co2 = 0
      that.soilWater = 0
      that.soilTemperature = 0
      const explainList = []
      this.sensorList.forEach(sensor => {
        sensor.explainList.forEach(explain => {
          if (explain.keyName === 'Sun_Light') {
            console.log('当前光照强度')
            console.log('0-20万Lux')
            that.sunLight = parseFloat(explain.value)
          } else if (explain.keyName === 'Air_Hum') {
            console.log('空气湿度')
            console.log('0%RH ~ 100%RH')
            that.airHumidity = parseFloat(explain.value)
          } else if (explain.keyName === 'Air_Temp') {
            console.log('空气温度')
            console.log('-40℃ ~ +80℃')
            that.airTemperature = parseFloat(explain.value)
          } else if (explain.keyName === 'Air_Press') {
            console.log('大气压强')
            console.log('300 ~ 1100hPa')
            that.airPressure = parseFloat(explain.value)
          } else if (explain.keyName === 'altitude') {
            console.log('海拔')
            that.altitude = parseFloat(explain.value)
          } else if (explain.keyName === 'ePM10') {
            console.log('PM10')
            console.log('0 ~ 500')
            that.pm10 = parseFloat(explain.value)
          } else if (explain.keyName === 'ePM25') {
            console.log('PM2.5')
            console.log('0 ~ 500')
            that.pm25 = parseFloat(explain.value)
          } else if (explain.keyName === 'CO2') {
            console.log('二氧化碳')
            console.log('0ppm-5000ppm')
            that.co2 = parseFloat(explain.value)
          } else if (explain.keyName === 'eLightSensor') {
            console.log('光照强度')
            console.log('0-20万Lux')
            that.sunLight = parseFloat(explain.value)
          } else if (explain.keyName === 'eHum') {
            console.log('空气湿度')
            console.log('0%RH ~ 100%RH')
            that.airHumidity = parseFloat(explain.value)
          } else if (explain.keyName === 'eTemp') {
            console.log('空气温度')
            console.log('-40℃ ~ +80℃')
            that.airTemperature = parseFloat(explain.value)
          } else if (explain.keyName === 'eBaroPress') {
            console.log('大气压力')
            console.log('300 ~ 1100hPa')
            that.airPressure = parseFloat(explain.value)
          } else if (explain.keyName === 'lLightSensor') {
            console.log('光照强度')
            console.log('0-20万Lux')
            that.sunLight = parseFloat(explain.value)
          } else if (explain.keyName === 'Soil_WC') {
            console.log('土壤水分')
            console.log('0%RH ~ 100%RH')
            that.soilWater = parseFloat(explain.value)
          } else if (explain.keyName === 'Soil_Temp') {
            console.log('土壤温度')
            console.log('-40℃ ~ +80℃')
            that.soilTemperature = parseFloat(explain.value)
          } else if (explain.keyName === 'Humidity') {
            console.log('空气湿度')
            console.log('0%RH ~ 100%RH')
            that.airHumidity = parseFloat(explain.value)
          } else if (explain.keyName === 'Temperature') {
            console.log('空气温度')
            console.log('-40℃ ~ +80℃')
            that.airTemperature = parseFloat(explain.value)
          } else {
            explainList.push(explain)
          }
        })
      })
      this.explainList = explainList
      this.skyData = [this.pm10, this.pm25, this.sunLight, this.airHumidity, this.airTemperature, this.airPressure, this.co2]
      console.log(this.skyData)
    },
    formatDate(date) {
      return formatDate(this, date)
    },
  }
}
</script>

<style scoped>
  .position-item{
    margin-top: 13px;
    padding: 13px;
    border-radius: 8px;
    height: 250px;
    display:flex;
    justify-content: space-between;
    position: relative;
  }
  .component-title{
    color: #FFF;
    font-size: 30px;
    position: absolute;
    bottom: 13px;
  }

  .title{
    color: #909399;
  }
  .value{
    margin-left: 13px;
    color: #34bfa3;
  }
</style>
